<template>
    <Modal
    title="电费代缴"
    :value="show"
    width="840"
    :closable="false"
    :mask-closable="false"
    @on-visible-change="setVisibility">

        <!-- 商户身份验证 -->
        <div class="ri-container">
            <h3 class="margin-bottom-20 margin-top-20">商户身份验证</h3>
            <div class="margin-bottom-20">
                商户手机号：{{clientPhone}}
            </div>
            <div class="margin-bottom-20">
                图形验证码：<captcha v-if="show" :reset="reset" @on-success="handleCaptcha" class="ri-captcha"></captcha>
            </div>
            <div class="margin-bottom-20">
                短信验证码：<i-input style="width:200px" v-model="code"></i-input>
                <i-button :loading="loading" @click="handleSmsCode" :disabled="second !== 0">{{second ? `${second}秒后可再次发送` : '发送验证码'}}</i-button>
            </div>
        </div>

        <!-- 自定义尾部 -->
        <Row slot="footer">
            <Button type="text" @click="setVisibility(false)">取消</Button>
            <Button type="primary" @click="handleSubmit">下一步</Button>
        </Row>

    </Modal>
</template>

<script>
import captcha from '@/views/captcha'
import { http, api } from '@/libs/http'
export default {
  data () {
    return {
      timer: null, // 倒计时
      second: 0, // 多少秒之后能再次点击发送短信验证码
      loading: false, // 是否正在加载
      captchaResult: '', // 螺丝帽验证码
      code: '', // 短信验证码
      reset: false // 是否重置螺丝帽验证码
    }
  },

  props: {
    show: {
      require: true
    },
    clientPhone: [Number, String]
  },

  watch: {
    show (n) {
      if (n) {
        this.reset = false
      } else {
        this.reset = true
        this.captchaResult = ''
      }
    }
  },
  components: { captcha },
  methods: {
    /**
         * 打开或者关闭弹窗
         */
    setVisibility (val) {
      this.$emit('update:show', val)
    },

    /**
         * 验证成功之后返回螺丝帽验证码
         */
    handleCaptcha (res) {
      this.captchaResult = res
    },

    /**
         * 发送短信验证码
         */
    handleSmsCode () {
      if (!this.captchaResult) {
        this.$Message.error('请先完成图形验证!')
        return
      }
      const params = {
        captcha_code: this.captchaResult
      }

      http.request(this, api.sms, null, params, (res, err) => {
        if (err || !res) {
          return
        }
        this.startCountDown()
      })
    },

    /**
         * 开始倒计时
         */
    startCountDown () {
      this.second = 60
      this.loading = true
      this.timer = setInterval(() => {
        this.second--
        if (this.second === 0) {
          clearInterval(this.timer)
          this.loading = false
          this.timer = null
        }
      }, 1000)
    },

    /**
         * 校验短信验证码
         */
    handleSubmit () {
      if (!this.code) {
        this.$Message.error('请输入短信验证码!')
        return
      }
      const params = {
        msg_code: this.code
      }
      http.request(this, api.sms_valid, null, params, (res, err) => {
        if (err || !res) {
          return
        }
        this.handleSuccess()
      })
    },

    // 开发展示
    handleSubmit1 () {
      this.handleSuccess()
    },

    /**
         * 通过短信验证之后进入功能开通
         */
    handleSuccess () {
      this.setVisibility(false)
      this.$emit('success')
    }
  }
}
</script>
<style lang='less' scoped>
.ri {
    &-container {
        padding: 20px;
    }

    &-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    &-content {
        margin-bottom: 20px;
    }

    &-captcha {
        width: 200px;
        display: inline-block;
        vertical-align: middle;
    }
}
</style>